<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
	<div ng-controller="roleController">
		<div ng-path></div>

		<div>
			<form class="form-inline">
				<div class="form-group form-group-sm">
					<shiro:hasPermission name="role:add">
						<button type="button" class="btn btn-primary btn-sm"
							data-toggle="modal" data-target="#roleDetail" ng-click="rm.add()">添
							加</button>
					</shiro:hasPermission>
					<shiro:hasPermission name="role:delete">
						<button type="button" class="btn btn-danger btn-sm"
							ng-click="rm.del()">删 除</button>
					</shiro:hasPermission>
				</div>
			</form>
		</div>

		<div>
			<table class="table table-hover">
				<thead>
					<tr>
						<td></td>
						<td>序号</td>
						<td>名称</td>
						<td>描述</td>
						<td>操作</td>
					</tr>
				</thead>
				<tbody>
					<tr ng-repeat="role in rm.roleList">
						<td><input type="checkbox" ng-model="role.isChecked"
							ng-true-value="true" ng-false-value="false"
							ng-disabled="role.id==1" /></td>
						<td>{{$index + 1}}</td>
						<td>{{role.name}}</td>
						<td>{{role.description}}</td>
						<td><shiro:hasPermission name="role:edit">
								<a href="javascript:void(0);" ng-click="rm.edit(role)"
									ng-show="role.id != 1" data-toggle="modal"
									data-target="#roleDetail"><span
									class="glyphicon glyphicon-edit" aria-hidden="true"></span></a>
							</shiro:hasPermission></td>
					</tr>
				</tbody>
			</table>
		</div>

		<!-- 角色添加修改 -->
		<div class="modal fade" role="dialog" id="roleDetail">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title">{{rm.title}}</h4>
					</div>
					<div class="modal-body">
						<form class="form-horizontal" role="form" id="userForm"
							name="roleForm">
							<input type="hidden" ng-model="rm.role.id" />
							<div class="form-group form-group-sm">
								<label class="col-sm-4 control-label">角色名称</label>
								<div class="col-sm-6">
									<input type="text" class="form-control" ng-disabled="rm.isEdit"
										ng-model="rm.role.name" required="">
								</div>
							</div>
							<div class="form-group form-group-sm">
								<label class="col-sm-4 control-label">描述</label>
								<div class="col-sm-6">
									<textarea row="2" class="form-control"
										ng-model="rm.role.description">
									{{rm.role.description}}
								</textarea>
								</div>
							</div>
							<div class="form-group form-group-sm">
								<label class="col-sm-4 control-label">权限</label>
								<div class="col-sm-6">
									<div class="resource-tree">
										<ul>
											<li ng-repeat="res in rm.reslist"><span
												class="glyphicon" ng-show="res.resourceList.length > 0"
												ng-class="res.isClosed?'glyphicon-minus':'glyphicon-plus'"
												ng-click="res.isClosed = !res.isClosed"></span><input
												type="checkbox" ng-model="res.isSelected"
												ng-change="rm.checkChange(res)" />{{res.name}}
												<ul>
													<li ng-show="res.isClosed"
														ng-repeat="res1 in res.resourceList"><span
														class="glyphicon" ng-show="res1.resourceList.length > 0"
														ng-class="res1.isClosed?'glyphicon-minus':'glyphicon-plus'"
														ng-click="res1.isClosed = !res1.isClosed"></span><input
														type="checkbox" ng-model="res1.isSelected"
														ng-change="rm.checkChange(res1)" />{{res1.name}}
														<ul>
															<li ng-show="res1.isClosed"
																ng-repeat="res2 in res1.resourceList"><span
																class="glyphicon" ng-show="res2.resourceList.length > 0"
																ng-class="res2.isClosed?'glyphicon-minus':'glyphicon-plus'"
																ng-click="res2.isClosed = !res2.isClosed"></span><input
																type="checkbox" ng-model="res2.isSelected"
																ng-change="rm.checkChange(res2)" />{{res2.name}}
																<ul>
																	<li ng-show="res2.isClosed"
																		ng-repeat="res3 in res2.resourceList"><input
																		type="checkbox" ng-model="res3.isSelected"
																		ng-change="rm.checkChange(res3)" />{{res3.name}}</li>
																</ul></li>
														</ul></li>
												</ul></li>
										</ul>
									</div>
								</div>
							</div>

							<div class="form-group"
								ng-show="roleForm.$invalid && rm.showError">
								<div class="col-sm-6 col-sm-offset-4">
									<div
										class="alert alert-danger alert-dismissible fade in custom-alert"
										role="alert">
										<ul>
											<li ng-show="roleForm.name.$error.required">角色名不能为空！</li>
										</ul>
									</div>
								</div>
							</div>
							<div class="form-group" ng-show="rm.showMessage">
								<div class="col-sm-6 col-sm-offset-4">
									<div class="alert alert-dismissible fade in custom-alert"
										role="alert"
										ng-class="rm.result==1?'alert-success':'alert-danger'">
										{{rm.message}}</div>
								</div>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="submit" class="btn btn-primary"
							ng-click="rm.addOrEdit(roleForm)">提交</button>
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					</div>
				</div>
			</div>
		</div>

	</div>
</body>
</html>